<template>
	<!-- 页面header -->
	<div style="background-color: #fff;padding:15px 10px;padding-bottom: 10px;border-radius: 8px;">
		<el-page-header @back="onBack">
			<template #breadcrumb v-if="layoutStore.showBreadcrumb">
				<el-breadcrumb>
					<el-breadcrumb-item v-for="(item, index) in breadcrumb">{{ item }}</el-breadcrumb-item>
				</el-breadcrumb>
			</template>
			<template #content>
				<div class="flex items-center">
					<span class="text-large font-600 mr-3"> {{ title }} </span>
				</div>
			</template>
			<template #extra>
				<slot name="headerTool"></slot>
			</template>
		</el-page-header>
	</div>
</template>

<script>
import { useLayoutStore } from "../../stores/layout"

export default {
	name: 'pageViewHeader',
	computed: {
		breadcrumb() {
			let data = this.$route.matched.map((item, index) => {
				return item.meta.title
			})
			data[0] = '首页'
			return data
		},
		title() {
			return this.$route.meta.title
		},
		layoutStore() {
			return useLayoutStore()
		},
	},
	methods: {
		onBack() {

		},
		refresh() {

		}
	}
}
</script>

<style></style>